<template>
  <div class="chart2-container">

    <Carousel
        :height="setting.height"
        :autoplay="setting.autoplay"
        :autoplay-speed="setting.autoplaySpeed"
        :dots="setting.dots"
        :radius-dot="setting.radiusDot"
        :trigger="setting.trigger"
        :arrow="setting.arrow">
      <CarouselItem v-for="(obj,i) in chartList" :key="i">
        <img
            class="carousel-img"
            :src="obj.chartUrl"
            @click="go(obj.chartUrl)">
      </CarouselItem>
    </Carousel>

  </div>
</template>

<script>
export default {
  //组件名称
  name: "Chart2",
  props: [],
  //组件注册
  components: {},
  //数据驱动
  data() {
    return {
      //轮播图设置
      setting: {
        //轮播图高度，默认 auto，单位px
        height: 400,
        //自动切换
        autoplay: true,
        //切换速度
        autoplaySpeed: 5000,
        //指示器位置 可选值为 inside（内部），outside（外部），none（不显示）
        dots: 'inside',
        //是否圆形指示器
        radiusDot: true,
        //指示器的触发方式，可选值为 click（点击），hover（悬停）
        trigger: 'hover',
        //切换箭头的显示时机，可选值为 hover（悬停），always（一直显示），never（不显示）
        arrow: 'hover'
      },
      chartList: [],
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {
    //点击轮播图，打开要跳转的页面
    go(obj) {
      window.open(obj.chartUrl, '_blank');
    },
    selectChartList: function () {
      this.axios.get(`/chart/web/charts`)
          .then((data) => {
            this.chartList = data.data
          })
    }
  },
  created() {
    this.selectChartList()
  },
  //钩子函数
  mounted() {
  }
}
</script>

<style lang="less" scoped>
.chart2-container {
  width: 1200px;
  height: 400px;
  margin: 15px auto;
  cursor: pointer;
  border-radius: 6px;
}
/*跑马灯图片样式*/
.carousel-img {
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
}
</style>